<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
	<meta charset="UTF-8">
	<title>后台主界面</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
	<!--引入layui的配置文件-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo">后台主界面</div>
		<!-- 头部区域（可配合layui已有的水平导航） -->
		<ul class="layui-nav layui-layout-left">
			<li class="layui-nav-item"><a href="javascript:void(0)">控制台</a></li>
			<li class="layui-nav-item"><a href="javascript:void(0)">商品管理</a></li>
			<li class="layui-nav-item"><a href="javascript:void(0)">用户</a></li>
			<li class="layui-nav-item">
				<a href="javascript:void(0)">其它系统</a>
				<dl class="layui-nav-child">
					<dd><a href="javascript:void(0)">邮件管理</a></dd>
					<dd><a href="javascript:void(0)">消息管理</a></dd>
					<dd><a href="javascript:void(0)">授权管理</a></dd>
				</dl>
			</li>
		</ul>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item">
				<a href="javascript:void(0);">
					<img src="layui/images/face/8.gif" class="layui-nav-img">
					李狗蛋
				</a>
				<dl class="layui-nav-child">
					<dd><a href="javascript:void(0)">基本资料</a></dd>
					<dd><a href="javascript:void(0)">安全设置</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="javascript:void(0)">退了</a></li>
		</ul>
	</div>

	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll">
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<ul class="layui-nav layui-nav-tree" id = "menu" lay-filter="my_menu">

			</ul>
		</div>
	</div>

	<div class="layui-body">
		<!-- 内容主体区域 -->
		<div style="padding: 15px;">
			<div class="layui-tab layui-tab-brief layui-tab-card" lay-allowClose="true"
				 lay-filter="myTab">
				<ul class="layui-tab-title">
					<li class="layui-this">欢迎页</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">欢迎使用..xxxx</div>
				</div>
			</div>
		</div>
		<%--<iframe name="content" id="content" style="width:100%;" height="100%" scrolling="yes" frameborder="0">
		</iframe>--%>
	</div>

<%--	<div class="layui-footer">--%>
<%--		<!-- 底部固定区域 -->--%>
<%--	</div>--%>
</div>


</body>
<%--添加选项卡单击事件--%>
	<script type="text/javascript">
		function addTabs(menuName,menuUrl,menuId){
			layui.use('element', function(){
				var element = layui.element;
				// content 需要引入一个新的页面（jsp页面） iframe标签 需要参数是页面的路径
				element.tabAdd('myTab', {// 打开选项卡
					title: menuName,//二级菜单的名字
					// src 要引入页面的路径
					content: '<iframe src="${pageContext.request.contextPath}'+menuUrl+'" width="100%" height="90%"></iframe>',
					id: menuId//id二级菜单的id
				});
				element.tabChange('myTab', menuId);
			});
		}
	</script>
<%--拼接页面菜单--%>
	<script type="text/javascript">
		$(function () {
			$.ajax({
				url:"${pageContext.request.contextPath}/menu/selectMenus",
				// 1.获取后台数据result
				success:function (result) {
					// 2.遍历拼接一级菜单的html
					var context = "";
					// each 遍历 参数1 被遍历的数据
					// 参数2 匿名函数 函数参数位置1 下标 位置2 被遍历的元素
					$.each(result,function (index1,menu1) {
						context += "<li class=\"layui-nav-item\"><a href=\"javascript:void(0)\">";
						// 一级菜单的名字
						context += menu1.name+"</a><dl class=\"layui-nav-child\">";
						// 拼接二级菜单内容
						$.each(menu1.sonMenu,function (index2, menu2) {
							// 拼接二级前标签
							context += "<dd><a href=\"javascript:void(0)\"  " +
									"onclick='addTabs(\"" + menu2.name + "\",\"" +menu2.url + "\"," + menu2.menuId +
									")'>";
							// 二级菜单的名字
							context += menu2.name;
							// 二级菜单后标签
							context += "</a></dd>";
						})
						context += "</dl></li>";
					});
					// 3.将html写入页面中
					$("#menu").html(context);
					// 强制layui渲染菜单 更新渲染
					layui.use('element', function(){
						var element = layui.element;
						element.render('nav', 'my_menu')
					});

				}
			})
		})

		//JavaScript代码区域  页面渲染模板
		layui.use('element', function(){
			var element = layui.element;

		});
	</script>
</html>